<template>
  <div :class="['buffer-panel', customClass]" :style="[customStyle]" v-loading="loading" element-loading-background="rgba(0,0,0,0.8)">
    <div style="margin-bottom: 5px">
      <el-radio-group v-model="buffD.radio" @change="changeRadio">
        <el-radio label="1">生成缓冲</el-radio>
        <el-radio label="2">单独生成障碍物</el-radio>
      </el-radio-group>
    </div>
    <div class="buffer-flex">
      <div class="buffer-flex-column">
        <el-tooltip content="绘制障碍物" placement="top">
          <div class="buffer-btn" @click="drawbuffer">
            <img class="buffer-icon" :src="imgDrawBuffer" />
          </div>
        </el-tooltip>
        <el-tooltip content="删除障碍物" placement="top">
          <div class="buffer-btn" @click="clearbuffer">
            <img class="buffer-icon" :src="imgClear" />
          </div>
        </el-tooltip>
        <el-tooltip content="保存障碍物" placement="top">
          <div class="buffer-btn" @click="savebuffer">
            <img class="buffer-icon" :src="imgSave" />
          </div>
        </el-tooltip>
      </div>
      <div class="">
        <div class="buff-r" v-if="buffD.radio != '2'">
          <span>r：</span>
          <el-input-number size="mini" v-model="buffD.r" :precision="2" :step="0.01" @change="rChange"></el-input-number>
        </div>
        <div class="buffer-flex buff-set-1">
          <div style="height: 120px; margin-top: 20px">
            <img class="buff-peism" :src="imgMinMaxHeight" />
          </div>
          <div class="buffer-flex-column buff-height">
            <el-input-number size="mini" v-model="buffD.maxh" :precision="2" :step="0.01" @change="maxhChange"></el-input-number>
            <el-input-number size="mini" v-model="buffD.minh" :precision="2" :step="0.01" @change="minhChange"></el-input-number>
          </div>
        </div>
      </div>
    </div>
    <div class="buffer-dialog" v-if="dialogVisible">
      <span>请选择区域属性</span>
      <div class="buffer-padding-5" v-if="buffD.radio != '2'">
        <span>绘制区域：</span>
        <el-select v-model="drawsNature" size="mini" placeholder="请选择绘制区域性质">
          <el-option v-for="draws in regions" :key="draws.value" :label="draws.label" :value="draws.value"></el-option>
        </el-select>
      </div>
      <div class="buffer-padding-5">
        <span>缓冲区域：</span>
        <el-select v-model="buffNature" size="mini" placeholder="请选择缓冲区域性质">
          <el-option v-for="buffs in regions" :key="buffs.value" :label="buffs.label" :value="buffs.value"></el-option>
        </el-select>
      </div>
      <div class="buffer-padding-5 buffer-btns">
        <el-button type="text" size="mini" @click="cancel">取消</el-button>
        <el-button type="success" size="mini" @click="configSave">确认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import BufferAnalysis from './obstacle'

let bufferAnalysis = null,
  buffData = null
export default {
  name: 'ldObstacle',
  props: {
    imgClear: {
      type: String,
      default: require('@/assets/img/clear.png')
    },
    imgDrawBuffer: {
      type: String,
      default: require('@/assets/img/buffer-1.png')
    },
    imgSave: {
      type: String,
      default: require('@/assets/img/save.png')
    },
    imgMinMaxHeight: {
      type: String,
      default: require('@/assets/img/minmaxheight.png')
    },
    obstacleUrl: {
      type: String,
      default: null
    },
    customClass: {
      type: [String, Array, Object],
      default: ''
    },
    customStyle: {
      type: [Object, Array],
      default: { background: '#073968a1' }
    },
    buffD: {
      type: Object,
      default: () => ({
        radio: '1',
        r: 10,
        maxh: 30,
        minh: 0
      })
    },
    regions: {
      typeof: Array,
      default: () => [
        { label: '禁飞区', value: 0 },
        { label: '限飞区', value: 1 }
      ]
    }
  },
  data() {
    return {
      dialogVisible: false,
      buffNature: null,
      drawsNature: null,
      loading: false
    }
  },
  mounted() {},
  methods: {
    drawbuffer() {
      this.clearbuffer()
      const viewer = window.Viewer
      bufferAnalysis = new BufferAnalysis(viewer, Cesium, this.buffD)
      bufferAnalysis.DrawPolygon(this.buffD.r, (data) => {
        buffData = data
      })
    },
    changeRadio(e) {
      if (e === '2') {
        this.buffD.r = 0
      } else {
        this.buffD.r = 10
      }
    },
    rChange(e) {
      bufferAnalysis && bufferAnalysis.setPolygonBuff(e, { holes: [] })
    },
    maxhChange(e) {
      bufferAnalysis && bufferAnalysis.changePolygonHeight(e)
    },
    minhChange(e) {
      bufferAnalysis && bufferAnalysis.changePolygonExtrudedHeight(e)
    },
    configSave() {
      let data = null
      if (this.buffD.radio === '1') {
        data = [
          {
            coords: buffData.buffPosition,
            heights: [this.buffD.minh, this.buffD.maxh],
            cost: this.buffNature
          },
          {
            coords: buffData.innerRingPos,
            heights: [this.buffD.minh, this.buffD.maxh],
            cost: this.drawsNature
          }
        ]
      }
      if (this.buffD.radio === '2') {
        data = [
          {
            coords: buffData.innerRingPos,
            heights: [this.buffD.minh, this.buffD.maxh],
            cost: this.buffNature
          }
        ]
      }
      this.loading = true
      this.saveobstal(data)
    },
    saveobstal(data) {
      var myHeaders = new Headers()
      myHeaders.append('Content-Type', 'application/json')

      const raw = JSON.stringify(data)

      var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: raw,
        redirect: 'follow'
      }
      const self = this
      fetch(this.obstacleUrl, requestOptions)
        .then((response) => response.text())
        .then((result) => {
          this.$message({ type: 'success', message: '保存成功' })
          self.loading = false
        })
        .catch((error) => this.$message({ message: error, type: 'warning' }))
      this.cancel()
    },
    savebuffer() {
      this.dialogVisible = true
    },
    clearbuffer() {
      if (bufferAnalysis) {
        bufferAnalysis.clearBuff()
        bufferAnalysis = null
      }
    },
    cancel() {
      this.dialogVisible = false
      this.buffNature = null
      this.drawsNature = null
    }
  },
  beforeDestroy() {
    this.clearbuffer()
  }
}
</script>

<style scoped>
.buffer-panel {
  position: absolute;
  top: 100px;
  left: 20px;
  color: #fff;
  border: solid #0e60af 2px;
  border-radius: 10px;
  padding: 10px;
  z-index: 9;
}

.buffer-flex {
  display: flex;
  /* gap: 10px; */
}

.buffer-flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.buff-r {
  display: flex;
  align-items: center;
}

.buffer-btn {
  /* height: 32px; */
  width: 40px;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.buffer-btn:hover {
  background: #ffffff78;
}

.buffer-icon {
  height: 100%;
  width: 100%;
}

.buff-peism {
  height: 100%;
}

.el-radio {
  color: #fff;
  cursor: pointer;
}

.buffer-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  background: #073968a1;
  border: solid #0e60af 2px;
  border-radius: 10px;
  padding: 5px;
}

.buffer-dialog > span {
  font-size: 18px;
}

.buffer-padding-5 {
  padding: 5px;
}

.buffer-btns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

::v-deep .el-input-number__decrease {
  display: none !important;
}

::v-deep .el-input-number__increase {
  display: none !important;
}

::v-deep .el-input-number .el-input__inner {
  padding: 0 !important;
  /* width: 60px; */
}

::v-deep .el-input-number .el-input__inner {
  padding: 0 !important;
  width: 100px;
}

::v-deep .el-input__inner {
  background-color: #ffffff00;
  color: #fff;
  border: solid 0 white !important;
  border-bottom: solid 1px white !important;
  height: 26px;
}

::v-deep .el-tooltip__popper.is-dark {
  color: white !important;
}
</style>